<template>
  <div class="view-container">

    <div class="main-content">

      <div class="list-container" style="padding-top: 0">
        <search-from :form-list="formList" :searchBtn="false" :indexLength="2" @onConfirm="filterDataConfirm"
          @onReset="filterReset" />

        <el-button type="primary" size="small" style="margin-bottom: 20px;" @click="handlAdd">新增投诉</el-button>

        <table-view :data="tableData" header-cell-class-name="table-header" size="small" border>

          <el-table-column prop="terminalName" label="投诉编号" align="center" show-overflow-tooltip />

          <el-table-column prop="terminalName" label="客户类型" align="center" show-overflow-tooltip />

          <el-table-column prop="terminalName" label="客户名称" header-align="center" show-overflow-tooltip />

          <el-table-column label="客户类型" align="投诉日期" show-overflow-tooltip>
            <template>
              {{ dateFormat("yyyy-mm-dd",'') }}
            </template>
          </el-table-column>

          <el-table-column prop="terminalName" label="创建人" header-align="center" show-overflow-tooltip />

          <el-table-column label="客户类型" align="创建时间" show-overflow-tooltip>
            <template>
              {{ dateFormat("yyyy-mm-dd",'') }}
            </template>
          </el-table-column>

        </table-view>
      </div>

       <new-complaints ref="newComplaintsRef" @succsess="succsess" />

    </div>

  </div>
</template>

<script>
import {defineAsyncComponent, getCurrentInstance, inject, reactive, toRefs,} from "vue";
import {useRoute} from "vue-router";

export default {
  components: {
    newComplaints: defineAsyncComponent(() =>
    import("../modules/newComplaints.vue"))
  },
  setup() {
    const api = inject("api");
    const route = useRoute();
    const currentInstance = getCurrentInstance();
    const data = reactive({
      tableData: [],
      queryParams: {
        customerStatus: "",
        startTime: null,
        endTime: null,
        customerName: null,
      },
      formList: [
        {
          key: "customerStatus",
          label: "状态",
          form_type: "select",
          value: "",
          is_search: false,
          options: [
            { label: "全部", value: "" },
            { label: "终端", value: "1" },
            { label: "代理", value: "2" },
            { label: "配送商", value: "3" },
          ],
        },
        {
          key: "date_range",
          label: "投诉日期",
          form_type: "daterange",
          value: [],
          is_search: false,
          options: [],
        },
        {
          key: "customerName",
          label: "客户名称",
          form_type: "text",
          value: "",
          is_search: false,
          options: [],
        },
      ],
      newComplaintsRef:null
    });

    const filterDataConfirm = (val) => {
      data.queryParams.customerStatus = val.customerStatus;
      data.queryParams.customerName = val.customerName;
      data.queryParams.startTime = val.date_range[0];
      data.queryParams.endTime = val.date_range[1];
    };

    const filterReset = () => {
      data.queryParams = {
        customerStatus: "",
        startTime: null,
        endTime: null,
        customerName: null,
      };
    };

    const handlAdd = ()=>{
      data.newComplaintsRef.open()
    }

    return {
      ...toRefs(data),
      filterDataConfirm,
      filterReset,
      handlAdd
    };
  },
};
</script>

<style lang="scss" scoped>
</style>